<template>
    <div>
        <div v-if="re" style="background-color:#ecf8ff;border-left:5px solid #50bfff;border-radius:4px;font-size:16px;margin:15px 0;padding:8px 12px;width:100%;" class="title-style"><span>{{kr_cp.title}}</span></div>
        <i-form v-if="re" :label-position="kr_cp.form_lp" :label-width="kr_cp.form_lw === 'no'?null:kr_cp.form_lw" :inline="true" :label-colon="kr_cp.form_lc" scp-type="搜索条" style="background-color:#f0faff;border-color:#abdcff;border-style:solid;border-width:1px;padding:8px 48px 8px 16px;">
            <Row :gutter="kr_cp.rowGutter">
                <Col :span="item.span?item.span:kr_cp.colSpan" v-for="(item,index) in krSearch" :key="index">
                    <div v-if="item.show === false?false:true" >
                        <Form-item scp-allowparent="i-form" :label="item.label" style="width:100%;height:10px">
                            <div style="padding-right:10px;min-height:10px;" scp-layout="true" class="form-element">
                                <i-input v-if="item.type === 'i'" :maxlength="item.maxWord?item.maxWord:1000" :clearable="true" scp-type="输入框" style="" :size="kr_cp.componentSize" type="text" :placeholder="item.placeholder?item.placeholder:'请输入……'" v-model="search[item.data]"></i-input><Select v-if="item.type === 's'" :clearable="true" v-on:on-change="krDFN(item.change,item.doC?true:false)" :filterable="true" scp-type="下拉框" style="width:100%;" :size="kr_cp.componentSize" :placeholder="item.placeholder?item.placeholder:'请选择……'" v-model="search[item.data]">
                                <Option :value="lItem.value" v-for="(lItem,lIndex) in item.list" :key="lIndex">{{lItem.text}}</Option>
                            </Select>
                                <DatePicker v-if="item.type === 'dp'" :clearable="true" v-on:on-change="krDFP($event,item.change)" style="width: 100%" placement="bottom" :size="kr_cp.componentSize" type="date" :placeholder="item.placeholder?item.placeholder:'请选择……'"></DatePicker>
                                <DatePicker v-if="item.type === 'dpr'" :clearable="true" v-on:on-change="krDFPR($event,item.change)" style="width: 100%" placement="bottom" :size="kr_cp.componentSize" type="daterange" :placeholder="item.placeholder?item.placeholder:'请选择……'"></DatePicker>
                                <DatePicker v-if="item.type === 'dtp'" :clearable="true" v-on:on-change="krDFP($event,item.change)" style="width: 100%" placement="bottom" :size="kr_cp.componentSize" type="datetime" :placeholder="item.placeholder?item.placeholder:'请选择……'"></DatePicker>
                                <DatePicker v-if="item.type === 'dtpr'" :clearable="true" v-on:on-change="krDFPR($event,item.change)" style="width: 100%" placement="bottom" :size="kr_cp.componentSize" type="datetimerange" :placeholder="item.placeholder?item.placeholder:'请选择……'"></DatePicker>
                                <TimePicker v-if="item.type === 'tp'" :clearable="true" v-on:on-change="krDFP($event,item.change)" style="width: 100%" placement="bottom" :size="kr_cp.componentSize" type="time" :placeholder="item.placeholder?item.placeholder:'请选择……'"></TimePicker>
                                <TimePicker v-if="item.type === 'tpr'" :clearable="true" v-on:on-change="krDFPR($event,item.change)" style="width: 100%" placement="bottom" :size="kr_cp.componentSize" type="timerange" :placeholder="item.placeholder?item.placeholder:'请选择……'"></TimePicker>
                                <wl-select-country v-if="item.type === 'sct'" :clearable="true" :width="'100%'" :size="kr_cp.componentSize" :placeholder="item.placeholder?item.placeholder:'请选择……'" v-model="srMod[item.data]"></wl-select-country>
                            </div>
                        </Form-item>
                    </div>
                </Col>
                <Col span="2" style="margin-right:15px;">
                    <div style="padding:1px;width:40px" scp-layout="true">
                        <i-button v-on:click="init(1,page.pageSize)" icon="ios-search" scp-type="按钮" style="" :size="kr_cp.componentSize" type="info">搜索</i-button>
                    </div>
                </Col>
                <Col span="1">
                    <div style="padding:1px;min-width:40px;" scp-layout="true">
                        <i-button v-on:click="krAction('add')" icon="md-add" scp-type="按钮" style="" :size="kr_cp.componentSize" type="success">新增</i-button>
                    </div>
                </Col>
            </Row>
        </i-form>
        <vxe-table v-if="re" hearder-align="center" :data="page.results" :loading="tableLoading" scp-type="vxe表格" :stripe="true" style="margin-top:20px;width:100%;" :highlight-hover-row="true" :size="kr_cp.componentSize" align="center" show-overflow="tooltip">
            <vxe-table-column v-if="kr_cp.table_index" width="80" type="index" title="序号"></vxe-table-column>
            <vxe-table-column :title="item.title" v-for="(item,index) in krTable" :width="item.width" :fixed="item.fixed" :key="index"><template style="margin:1px;padding:1px;min-height:20px;" scp-layout="true" v-slot="{ row }"><span v-if="item.dictionary"><span v-for="(dItem,dIndex) in item.dRule" :key="dIndex"><span v-if="dItem.data === row[item.data]">
                                {{dItem.text}}
                            </span></span></span><span v-if="!item.dictionary">
                        {{row[item.data]}}
                    </span></template></vxe-table-column>
            <vxe-table-column v-if="kr_cp.actionColShow" field="" fixed="right" :width="kr_cp.actionColWidth" title="操作"><template style="padding:1px;margin: 1px;min-height:20px" scp-layout="true" v-slot="{ row }">
                <i-button v-if="row.state == 0" v-on:click="krAction('submit',row)" style="margin-right:5px" :size="kr_cp.componentSize" type="success">发布</i-button>
                <i-button v-if="row.state == 0" v-on:click="krAction('edit',row)" style="margin-right:5px" :size="kr_cp.componentSize" type="info">编辑</i-button>
                <i-button v-if="row.state == 1" v-on:click="krAction('detail',row)" style="margin-right:5px" :size="kr_cp.componentSize" type="default">详情</i-button>
                <i-button v-if="row.state == 1" v-on:click="krAction('down',row)" style="margin-right:5px" :size="kr_cp.componentSize" type="warning">下架</i-button>
                <i-button v-if="row.state == 2" v-on:click="krAction('init',row)" style="margin-right:5px" :size="kr_cp.componentSize" type="primary">置回草稿</i-button>
                <i-button v-if="row.state == 0" v-on:click="krAction('del',row)" :size="kr_cp.componentSize" type="error">删除</i-button>
            </template></vxe-table-column>
        </vxe-table>
        <Page v-if="re?kr_cp.pageShow?true:false:false" :current="page.pageNo" :page-size="page.pageSize" :total="page.totalRecord" v-on:on-change="(val) => init(val)" scp-type="分页" :show-sizer="true" :show-total="true" style="margin-top:20px;" :show-elevator="true" v-on:on-page-size-change="(val) => init(1,val)"></Page>
        <Modal ok-text="确认删除" title="确认删除" v-model="delModal" v-on:on-ok="krAction('tdel')">
            <div style="text-align:center;font-size:14px">
                被删除的数据无法恢复，是否确认删除？
            </div>
        </Modal>
    </div>
</template>

<script>
import { updateSstArticleNotice, findSstArticleNoticeList } from '@/api/dispatch'
export default {
  name: 'list',
  data () {
    return {
      'out_data_List': [{
        'name': 'Karenloar',
        'age': 20
      }, {
        'name': '假数据，记得替换',
        'age': 20
      }],
      'delModal': false,
      'srMod': {},
      'krSearch': [{
        'data': 'title',
        'placeholder': '请输入文章标题',
        'type': 'i',
        'span': 5
      }, {
        'data': 'upload_date',
        'placeholder': '请选择发布日期',
        'type': 'dp',
        change: 'dateChange',
        'span': 5
      }, {
        'data': 'type',
        'placeholder': '请选择文章类型',
        'type': 's',
        'span': 5,
        list: [
          { value: '1', text: '通知公告' },
          { value: '2', text: '业务公告' },
          { value: '3', text: '政策法规' },
          { value: '4', text: '政策解读' },
          { value: '5', text: '放管服改革' },
          { value: '6', text: '服务事项高效办' }
        ]
      }, {
        'data': 'state',
        'placeholder': '请选择状态',
        'type': 's',
        'span': 5,
        list: [{ text: '草稿', value: '0' }, { text: '发布中', value: '1' }, { text: '已下架', value: '2' }]
      }],
      'tableLoading': false,
      'errorMsg': '',
      'out_header_List': [
        ['name', 'age'],
        ['姓名', '年龄']
      ],
      'delMod': {},
      'search': {},
      're': true,
      'krTable': [{
        'data': 'title',
        'title': '文章标题'
      }, {
        'data': 'author',
        'title': '作者'
      }, {
        'data': 'upload_date',
        'title': '发布日期'
      }, {
        data: 'source',
        title: '信息来源'
      }, {
        data: 'type',
        title: '文章类型',
        dictionary: true,
        dRule: [
          { data: '1', text: '通知公告' },
          { data: '2', text: '业务公告' },
          { data: '3', text: '政策法规' },
          { data: '4', text: '政策解读' },
          { data: '5', text: '放管服改革' },
          { data: '6', text: '服务事项高效办' }
        ]
      }, {
        'data': 'state',
        'title': '状态',
        dictionary: true,
        dRule: [
          { data: '0', text: '草稿' }, { data: '1', text: '发布中' }, { data: '2', text: '已下架' }
        ]
      }],
      'page': {
        'pageNo': 1,
        'pageSize': 10,
        'results': []
      },
      'kr_cp': {
        'form_lp': 'top',
        'englishName': 'common parameters',
        'rowGutter': 4,
        'colSpan': '5',
        'componentSize': 'default',
        'title': '文章列表',
        'form_lc': true,
        'table_index': true,
        'actionColWidth': 100,
        'form_lw': 'no',
        'name': '公共参数',
        'rowAlign': 'middle',
        'rowJustify': 'start',
        'pageShow': true,
        'actionColShow': true
      }
    }
  },
  computed: {},
  watch: {
    '$route' (to, from) {
      this.kr_init()
    }
  },
  mounted () {
    this.kr_init()
  },
  methods: {
    init (pageNo, pageSize) {
      // let cache_country_index = 0
      // let cache_country = [ // 真实form的对应国家和编号字段名(单个字段不必填此表,默认传中文,若需要多个字段，需要填此表)
      //   ['cn_country1', 'code1'],
      //   ['cn_country2', 'code2']
      // ]
      this.krSearch.forEach((item, index) => {
        if (item.type === 'sct') {
          if (this.srMod[item.data]) {
            this.search[item.data] = this.srMod[item.data].text // text中文,en英文,tel编号
          }
        }
      })
      this.tableLoading = true
      let params = {}
      if (pageNo) {
        params.pageNo = pageNo
      }
      if (pageSize) {
        params.pageSize = pageSize
      }
      console.log(this.search)
      findSstArticleNoticeList({ ...this.search, ...params }).then(res => {
        let data = res.data
        if (data.errcode === 0) {
          this.page = data.data
          this.page.results.forEach(item => {
            item.upload_date = this.$common.xeUtils.toDateString(item.upload_date, 'yyyy-MM-dd')
          })
          this.tableLoading = false
        } else {
          this.error(data.errmsg)
        }
      })
    },
    dateChange (val) {
      this.search.upload_date = val
    },
    krAction (ac_pd, row) {
      if (ac_pd === 'submit') {
        updateSstArticleNotice({ id: row.id, state: '1' }).then(res => {
          let data = res.data
          if (data.errcode === 0) {
            this.success('发布成功')
            this.init()
          } else {
            this.error(data.errmsg)
          }
        })
      } else if (ac_pd === 'down') {
        updateSstArticleNotice({ id: row.id, state: '2' }).then(res => {
          let data = res.data
          if (data.errcode === 0) {
            this.success('下架成功')
            this.init()
          } else {
            this.error(data.errmsg)
          }
        })
      } else if (ac_pd === 'init') {
        updateSstArticleNotice({ id: row.id, state: '0' }).then(res => {
          let data = res.data
          if (data.errcode === 0) {
            this.success('重置成功')
            this.init()
          } else {
            this.error(data.errmsg)
          }
        })
      } else if (ac_pd === 'add') {
        this.$router.push({
          path: '/gov/dispatch-manage-detail',
          query: {
            pd: 1
          }
        })
      } else if (ac_pd === 'edit') {
        this.$router.push({
          path: '/gov/dispatch-manage-detail',
          query: {
            form: row,
            pd: 2
          }
        })
      } else if (ac_pd === 'detail') {
        this.$router.push({
          path: '/gov/dispatch-manage-detail',
          query: {
            form: row,
            pd: 3
          }
        })
      } else if (ac_pd === 'del') {
        this.delMod = row
        this.delModal = true
      } else if (ac_pd === 'tdel') {
        updateSstArticleNotice({ id: this.delMod.id, del_flag: '1' }).then(res => {
          let data = res.data
          if (data.errcode === 0) {
            this.success('删除成功')
            this.delModal = false
            this.init()
          } else {
            this.error(data.errmsg)
          }
        })
      }
    },
    success (msg, time, close) {
      let krTime = 3
      if (time) {
        krTime = time
      }
      let krClose = false
      if (close === true || close === 'true' || close === '1') {
        krClose = true
      }
      this.$Message.success({
        content: msg,
        duration: krTime,
        closable: krClose
      })
    },
    kr_init () {
      // if (this.$route.query.state) {
      //   this.search.state = this.$route.query.state
      // if (this.search.state === 0) {
      this.kr_cp.actionColWidth = 250
      // } else {
      //   this.kr_cp.actionColWidth = 100
      // }
      this.init()
      // } else {
      //   this.error('缺少必要参数!')
      //   this.re = false
      // }
      // this.init(this.page.pageNo);
    },
    krDFPR (e, f) {
      if (e[0]) {
        this.srMod[f] = true
      } else {
        this.srMod[f] = false
      }
      this[f](e[0], e[1])
    },
    error (msg, time, close) {
      let krTime = 3
      if (time) {
        krTime = time
      }
      let krClose = false
      if (close === true || close === 'true' || close === '1') {
        krClose = true
      }
      this.$Message.error({
        content: msg,
        duration: krTime,
        closable: krClose
      })
    },
    kr_warehouse () { // 仓库
      // krTable参数说明
      // "title": "姓名", // 表头标题
      // "fixed": "", // fixed属性,可选left,right
      // "data": "name", // 数据源字段名
      // "width": 100, // 列宽
      // "dictionary": true, // 是否启用数据字典
      // "dRule": [{ // 数据字典规则
      //     "data": 1,
      //     "text": "男"
      // }, {
      //     "data": 2,
      //     "text": "女"
      // }]

      // krSearch参数说明
      // search为真实数据源,krSearch为页面渲染配置
      // krSearch中的每一项都为一个表单项，内部详细属性说明如下:
      // "show": false // 是否显示,默认显示
      // "span": 8 // 行宽占比(单独配置),24为一整行,可无,默认为kr_cp.colSpan(统一配置)
      // "label": "姓名", // 表单项名,可无,启用时需调整<Form-item>中style的height
      // "data": "name", // 数据源字段名
      // "type": "i", // 填报模块类型:i输入框,s下拉框,r单选框,dp日期选择,dpr日期段选择,tp时间选择,tpr时间段选择,sct国家列表
      // "maxWord": 11, // 字数上限,适用于type为i的情况下
      // "placeholder": "请输入……", // 占位文本,有默认值,可无
      // "list": [{ // 当type为s时的选项列表,可无
      //     "text": "Karenloar",
      //     "value": "Karenloar"
      // }, {
      //     "text": "renpeng",
      //     "value": "renpeng"
      // }],
      // "change": "functionName", // change事件名,需定义对应事件,支持默认传参(只有一位),可无
      // "doC": 1, // 适用type为s的情况,是否执行change事件,可无,默认不执行

      // html-其他搜索项模板
      // <Col :span="kr_cp.colSpan">
      //     <div style="padding:1px;min-width:40px;width:100%" scp-layout="true">
      //         <DatePicker :size="kr_cp.componentSize" :clearable="true" v-on:on-change="kr_daterangeChange" style="width: 100%" placeholder="日期段条件" type="daterange"></DatePicker>
      //     </div>
      //     </Col>
      //     <Col :span="kr_cp.colSpan">
      //     <div style="padding:1px;min-width:40px;width:100%" scp-layout="true">
      //         <TimePicker :size="kr_cp.componentSize" :clearable="true" v-on:on-change="kr_timeChange" style="width: 100%" placeholder="时间条件" type="time"></TimePicker>
      //     </div>
      //     </Col>
      //     <Col :span="kr_cp.colSpan">
      //     <div style="padding:1px;min-width:40px;width:100%" scp-layout="true">
      //         <TimePicker :size="kr_cp.componentSize" :clearable="true" v-on:on-change="kr_timerangeChange" style="width: 100%" placeholder="时间段条件" type="timerange"></TimePicker>
      //     </div>
      //     </Col>

      // html-新增、数据导出按钮
      // <Col span="2">
      //   <div style="padding:1px;min-width:40px;" scp-layout="true">
      //       <i-button :size="kr_cp.componentSize" v-on:click="insertAction()" icon="md-add" scp-type="按钮" style="" type="default">新增</i-button>
      //   </div>
      //   </Col>
      //   <Col span="3">
      //   <div style="padding:1px;min-width:40px;" scp-layout="true">
      //       <wl-down-excel :size="kr_cp.componentSize" errcode="0" filename="导出文件名" :params="{}" scp-type="数据下载" name="数据导出" :header="out_header_List" style="margin-right:10px;" :down-data="out_data_List"></wl-down-excel>
      //   </div>
      //   </Col>
      //   <Col span="3">
      //   <div style="padding:1px;min-width:40px;" scp-layout="true">
      //       <wl-down-excel :size="kr_cp.componentSize" errcode="0" filename="导出文件名" :params="{}" scp-type="数据下载" name="数据导出" :header="out_header_List" api-url="接口地址" style="margin-right:10px;"></wl-down-excel>
      //   </div>
      //   </Col>
    },
    krDFN (f, doit) {
      if (doit) this[f]()
    },
    cdChange (val) {
      this.search.cd = val
    },
    krDFP (e, f) {
      if (e) {
        this.srMod[f] = true
      } else {
        this.srMod[f] = false
      }
      this[f](e)
    }
  }
}
</script>

<style scoped>

</style>
